<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>道具商店 - LinkUp连连看</title>
    <link rel="stylesheet" th:href="@{/static/css/common.css}">
    <style>
        .shop-container {
            max-width: 1200px;
            margin: 80px auto 40px;
            padding: 0 20px;
        }

        .shop-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            border-radius: 15px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .shop-header h1 {
            margin: 0 0 10px 0;
            font-size: 32px;
        }

        .user-score {
            font-size: 24px;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .score-icon {
            font-size: 28px;
        }

        .shop-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }

        .item-card {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .item-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .item-type-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .item-icon {
            font-size: 64px;
            text-align: center;
            margin: 20px 0;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .item-name {
            font-size: 22px;
            font-weight: bold;
            color: #2d3748;
            text-align: center;
            margin-bottom: 10px;
        }

        .item-description {
            color: #718096;
            text-align: center;
            font-size: 14px;
            margin-bottom: 20px;
            min-height: 60px;
            line-height: 1.6;
        }

        .item-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 2px solid #f0f0f0;
            padding-top: 15px;
        }

        .item-price {
            font-size: 24px;
            font-weight: bold;
            color: #667eea;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .item-owned {
            font-size: 14px;
            color: #38a169;
            font-weight: bold;
        }

        .buy-section {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .quantity-input {
            width: 60px;
            padding: 8px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
        }

        .buy-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .buy-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }

        .buy-btn:disabled {
            background: #cbd5e0;
            cursor: not-allowed;
            transform: none;
        }

        .loading {
            text-align: center;
            padding: 60px 20px;
            font-size: 18px;
            color: #718096;
        }

        .empty-shop {
            text-align: center;
            padding: 80px 20px;
            color: #a0aec0;
        }

        .empty-shop-icon {
            font-size: 80px;
            margin-bottom: 20px;
        }

        .back-btn {
            display: inline-block;
            margin-top: 20px;
            padding: 12px 30px;
            background: white;
            color: #667eea;
            border: 2px solid #667eea;
            border-radius: 8px;
            text-decoration: none;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .back-btn:hover {
            background: #667eea;
            color: white;
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">🎮 LinkUp 连连看</div>
            <div class="nav-menu">
                <a th:href="@{/user/home}">首页</a>
                <a th:href="@{/user/shop}" class="active">道具商店</a>
                <a href="#" onclick="logout()">退出</a>
            </div>
        </div>
    </nav>

    <div class="shop-container">
        <div class="shop-header">
            <h1>🏪 道具商店</h1>
            <div class="user-score">
                <span class="score-icon">💰</span>
                <span>当前积分：<span id="userScore">0</span></span>
            </div>
        </div>

        <div id="loadingMessage" class="loading">
            ⏳ 加载中...
        </div>

        <div id="shopGrid" class="shop-grid" style="display: none;">
            <!-- 道具卡片将通过JavaScript动态加载 -->
        </div>

        <div id="emptyMessage" class="empty-shop" style="display: none;">
            <div class="empty-shop-icon">🛒</div>
            <h2>商店暂无商品</h2>
            <p>敬请期待更多道具上架</p>
        </div>

        <div style="text-align: center;">
            <a th:href="@{/user/home}" class="back-btn">返回首页</a>
        </div>
    </div>

    <footer class="footer">
        <div class="footer-content">
            <p>&copy; 2025 LinkUp 连连看. All rights reserved.</p>
            <p>享受游戏，挑战自我！</p>
        </div>
    </footer>

    <script>
        // 道具图标映射
        const itemIcons = {
            'compass': '🧭',
            'reshuffle': '🔄',
            'bomb': '💣',
            'freeze': '⏰',
            'freeze_enemy': '🚫',
            'clock': '⏰',
            'blindfold': '🙈',
            'mirror': '🪞',
            'obstacle': '🧱'
        };

        // 道具类型映射
        const itemTypes = {
            1: '自用道具',
            2: '对战道具'
        };

        let userScore = 0;

        // 加载商店数据
        function loadShop() {
            fetch('/user/shop/items')
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        const shopData = data.data;
                        userScore = shopData.userScore || 0;
                        document.getElementById('userScore').textContent = userScore;

                        const items = shopData.items || [];
                        const userItems = shopData.userItems || {};

                        if (items.length === 0) {
                            showEmpty();
                        } else {
                            renderShop(items, userItems);
                        }
                    } else {
                        alert('加载商店失败：' + data.message);
                        showEmpty();
                    }
                })
                .catch(error => {
                    console.error('加载失败', error);
                    alert('网络错误，请稍后重试');
                    showEmpty();
                });
        }

        // 渲染商店
        function renderShop(items, userItems) {
            const shopGrid = document.getElementById('shopGrid');
            shopGrid.innerHTML = '';

            items.forEach(item => {
                const ownedCount = userItems[item.itemCode] || 0;
                const itemCard = createItemCard(item, ownedCount);
                shopGrid.appendChild(itemCard);
            });

            document.getElementById('loadingMessage').style.display = 'none';
            shopGrid.style.display = 'grid';
        }

        // 创建道具卡片
        function createItemCard(item, ownedCount) {
            const card = document.createElement('div');
            card.className = 'item-card';
            card.innerHTML = `
                <div class="item-type-badge">${itemTypes[item.itemType] || '道具'}</div>
                <div class="item-icon">${itemIcons[item.itemCode] || '🎁'}</div>
                <div class="item-name">${item.itemName}</div>
                <div class="item-description">${item.description || '神秘道具'}</div>
                <div class="item-footer">
                    <div>
                        <div class="item-price">
                            <span>💰</span>
                            <span>${item.price}</span>
                        </div>
                        <div class="item-owned">已拥有：${ownedCount}个</div>
                    </div>
                    <div class="buy-section">
                        <input type="number" class="quantity-input" value="1" min="1" max="99" 
                               id="qty-${item.itemCode}">
                        <button class="buy-btn" onclick="buyItem('${item.itemCode}', ${item.price})">
                            购买
                        </button>
                    </div>
                </div>
            `;
            return card;
        }

        // 显示空状态
        function showEmpty() {
            document.getElementById('loadingMessage').style.display = 'none';
            document.getElementById('emptyMessage').style.display = 'block';
        }

        // 购买道具
        function buyItem(itemCode, price) {
            const quantityInput = document.getElementById('qty-' + itemCode);
            const quantity = parseInt(quantityInput.value);

            if (quantity < 1 || quantity > 99) {
                alert('购买数量必须在1-99之间');
                return;
            }

            const totalPrice = price * quantity;
            if (totalPrice > userScore) {
                alert(`积分不足！需要${totalPrice}积分，当前仅有${userScore}积分`);
                return;
            }

            if (!confirm(`确认购买${quantity}个道具？\n将消耗${totalPrice}积分`)) {
                return;
            }

            // 发送购买请求
            fetch('/user/shop/purchase', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    itemCode: itemCode,
                    quantity: quantity
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    alert('购买成功！');
                    // 刷新页面
                    location.reload();
                } else {
                    alert('购买失败：' + data.message);
                }
            })
            .catch(error => {
                console.error('购买失败', error);
                alert('网络错误，请稍后重试');
            });
        }

        // 退出登录
        function logout() {
            if (confirm('确定要退出登录吗？')) {
                window.location.href = '/user/logout';
            }
        }

        // 页面加载时初始化
        window.onload = function() {
            loadShop();
        };
    </script>
</body>
</html>

